<template>
    <div class="homeContainer">
        <!-- 顶部标题区 -->
        <div class="page-header">
            <h1 class="main-title">数据可视化平台</h1>
            <p class="sub-title">探索地理空间与数据图表的可视化魅力</p>
        </div>

        <!-- 主内容区 -->
        <div class="content-grid">
            <!-- 3D地球卡片 -->
            <div class="visual-card" @click="navigateTo('/mapBox')">
                <div class="card-image">
                    <img src="/public/home/image1.png" alt="3D地球可视化效果展示" class="preview-img">
                    <div class="overlay-mask">
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-header">
                        <el-tag type="primary" class="card-tag">3D空间</el-tag>
                        <h3 class="card-title">地球可视化系统</h3>
                    </div>
                    <p class="card-desc">
                        基于WebGL的三维地球模型，支持全球地理数据展示、动态数据叠加与交互式探索
                    </p>
                    <div class="card-stats">
                        <span class="stat-item"><i class="el-icon-data"></i> 2,458个数据点</span>
                        <span class="stat-item"><i class="el-icon-refresh"></i> 实时更新</span>
                    </div>
                </div>
            </div>

            <!-- 2D中国地图卡片 -->
            <div class="visual-card" @click="navigateTo('/chinaMap')">
                <div class="card-image">
                    <img src="/public/home/image2.png" alt="2D中国地图可视化效果展示" class="preview-img">
                    <div class="overlay-mask">
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-header">
                        <el-tag type="error" class="card-tag">区域分析</el-tag>
                        <h3 class="card-title">中国地图数据平台</h3>
                    </div>
                    <p class="card-desc">
                        高精度省级行政区地图，支持区域数据对比、热力分布与专题地图展示
                    </p>
                    <div class="card-stats">
                        <span class="stat-item"><i class="el-icon-location"></i> 34个行政区</span>
                        <span class="stat-item"><i class="el-icon-pie-chart"></i> 多维度分析</span>
                    </div>
                </div>
            </div>

            <!-- 图表展示卡片 -->
            <div class="visual-card" @click="navigateTo('/charts')">
                <div class="card-image">
                    <img src="/public/home/image1.png" alt="数据图表可视化效果展示" class="preview-img">
                    <div class="overlay-mask">
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-header">
                        <el-tag type="warning" class="card-tag">数据分析</el-tag>
                        <h3 class="card-title">多维图表中心</h3>
                    </div>
                    <p class="card-desc">
                        丰富的图表类型库，包括折线图、柱状图、雷达图等，支持数据联动与下钻分析
                    </p>
                    <div class="card-stats">
                        <span class="stat-item"><i class="el-icon-picture"></i> 8种图表类型</span>
                        <span class="stat-item"><i class="el-icon-edit"></i> 自定义配置</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据概览区 -->
        <div class="data-overview">
            <h2 class="section-title">平台数据概览</h2>
            <div class="stats-grid">
                <el-card class="overview-card">
                    <div class="overview-icon primary-icon">
                        <i class="el-icon-globe">
                            <el-badge class="badge" value="NEW"> </el-badge>
                        </i>
                    </div>
                    <div class="overview-info">
                        <div class="info-label">地球模型精度</div>
                        <div class="info-value">1:1000000</div>
                    </div>
                </el-card>
                <el-card class="overview-card">
                    <div class="overview-icon success-icon">
                        <i class="el-icon-map">
                            <el-badge class="badge" value="NEW"> </el-badge>
                        </i>
                    </div>
                    <div class="overview-info">
                        <div class="info-label">地图数据更新</div>
                        <div class="info-value">2023年Q3</div>
                    </div>
                </el-card>
                <el-card class="overview-card">
                    <div class="overview-icon info-icon">
                        <i class="el-icon-bar-chart">
                            <el-badge class="badge" value="NEW"> </el-badge>
                        </i>
                    </div>
                    <div class="overview-info">
                        <div class="info-label">图表渲染速度</div>
                        <div class="info-value">≤ 0.3秒</div>
                    </div>
                </el-card>
                <el-card class="overview-card">
                    <div class="overview-icon warning-icon">
                        <i class="el-icon-database">
                            <el-badge class="badge" value="NEW"> </el-badge>
                        </i>
                    </div>
                    <div class="overview-info">
                        <div class="info-label">累计数据量</div>
                        <div class="info-value">15.8 GB</div>
                    </div>
                </el-card>
            </div>
        </div>

        <!-- 使用指南 -->
        <div class="guide-section">
            <h2 class="section-title">快速使用指南</h2>
            <div class="guide-steps">
                <div class="step-item">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>选择可视化类型</h3>
                        <p>根据您的需求选择3D地球、2D中国地图或数据图表</p>
                    </div>
                </div>
                <div class="step-divider"></div>
                <div class="step-item">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>配置数据参数</h3>
                        <p>通过侧边栏设置数据来源、展示方式和样式参数</p>
                    </div>
                </div>
                <div class="step-divider"></div>
                <div class="step-item">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>交互与导出</h3>
                        <p>通过鼠标交互探索数据，支持截图和数据导出功能</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useAuthStore } from '../../store/auth';
import { useRouter } from 'vue-router';
import { onMounted, useTemplateRef } from 'vue';
// 初始化路由
const router = useRouter();
const authStore = useAuthStore();
// 页面导航方法
const navigateTo = (path) => {
    router.push({ path });
};

// 执行登录（持久化处理）
authStore.login('小明', 'bavfjavfajvfaf');
</script>

<style lang="scss" scoped>
.homeContainer {
    min-height: 100vh;
    background-color: #f0f2f5;
    padding: 20px;
    box-sizing: border-box;
}

// 标题区样式
.page-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px 0;

    .main-title {
        font-size: 32px;
        font-weight: 700;
        color: #1d2129;
        margin-bottom: 10px;
    }

    .sub-title {
        font-size: 16px;
        color: #4e5969;
        max-width: 800px;
        margin: 0 auto;
    }
}

// 卡片网格布局
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 60px;
}

// 可视化卡片样式
.visual-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .card-image {
        position: relative;
        height: 200px;
        overflow: hidden;

        .preview-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        &:hover .preview-img {
            transform: scale(1.05);
        }

        .overlay-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            color: white;
            font-size: 32px;

            &:hover {
                opacity: 1;
            }
        }
    }

    .card-content {
        padding: 20px;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;

            .card-tag {
                margin-right: 8px;
            }

            .card-title {
                font-size: 18px;
                font-weight: 600;
                color: #1d2129;
                margin: 0;
            }
        }

        .card-desc {
            font-size: 14px;
            color: #4e5969;
            line-height: 1.6;
            margin-bottom: 16px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .card-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 12px;
            color: #86909c;

            .stat-item {
                display: flex;
                align-items: center;

                i {
                    margin-right: 4px;
                    font-size: 14px;
                }
            }
        }
    }
}

// 数据概览区
.data-overview {
    width: var(--width);
    margin: 0 auto 60px;

    .section-title {
        font-size: 24px;
        font-weight: 600;
        color: #1d2129;
        margin-bottom: 24px;
        padding-left: 8px;
        border-left: 4px solid #409eff;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }

    .overview-card {
        border: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(-3px);
        }

        .overview-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-right: 16px;
        }

        .primary-icon {
            background-color: rgba(64, 158, 255, 0.1);
            color: #409eff;
        }

        .success-icon {
            background-color: rgba(103, 194, 58, 0.1);
            color: #67c23a;
        }

        .info-icon {
            background-color: rgba(145, 158, 171, 0.1);
            color: #919eab;
        }

        .warning-icon {
            background-color: rgba(230, 162, 60, 0.1);
            color: #e6a23c;
        }

        .overview-info {
            .info-label {
                font-size: 14px;
                color: #86909c;
                margin-bottom: 4px;
            }

            .info-value {
                font-size: 20px;
                font-weight: 600;
                color: #1d2129;
            }
        }
    }
}

// 使用指南区
.guide-section {
    width: var(--width);
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    .section-title {
        font-size: 24px;
        font-weight: 600;
        color: #1d2129;
        margin-bottom: 30px;
        padding-left: 8px;
        border-left: 4px solid #409eff;
    }

    .guide-steps {
        display: flex;
        flex-wrap: wrap;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: 30px;
            left: 60px;
            right: 60px;
            height: 2px;
            background-color: #e5e6eb;
            z-index: 1;
        }

        .step-item {
            flex: 1;
            min-width: 200px;
            padding: 0 20px;
            position: relative;
            z-index: 2;

            .step-number {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background-color: #f2f3f5;
                color: #86909c;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 16px;
                transition: all 0.3s ease;
            }

            &:hover .step-number {
                background-color: #409eff;
                color: white;
            }

            .step-content {
                h3 {
                    font-size: 16px;
                    font-weight: 600;
                    color: #1d2129;
                    margin-bottom: 8px;
                }

                p {
                    font-size: 14px;
                    color: #4e5969;
                    margin: 0;
                }
            }
        }
    }
}

// 响应式调整
@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .guide-steps {
        flex-direction: column;

        &::before {
            width: 2px;
            height: calc(100% - 120px);
            top: 60px;
            left: 30px;
            right: auto;
        }

        .step-item {
            padding: 20px 0 20px 60px;
        }
    }
}
</style>